константы
Typography

Шрифт

Основной шрифт в интерфейсах
Цифрового университета — Segoe UI.

Заголовки

font-size / line-height / paragraph (px)

SP1Bold 700
56/64/32

Крупный заголовок

SP2Bold 700
48/56/28

Заголовок поменьше

H1Bold 700
40/48/24

Заголовок первого уровня

H2Semibold 600
36/44/22

Заголовок второго уровня

H3Semibold 600
32/40/20

Заголовок третьего уровня

H4Semibold 600
28/36/18

Заголовок четвертого уровня

.cds-sp1

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 56px;

line-height: 64px;

paragraph: 32px;

.cds-sp2

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 48px;

line-height: 56px;

paragraph: 28px;

.cds-h1

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 40px;

line-height: 48px;

paragraph: 24px;

.cds-h2

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 36px;

line-height: 44px;

paragraph: 22px;

.cds-h3

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 32px;

line-height: 40px;

paragraph: 20px;

.cds-h4

font-family: Segoe UI, sans-serif;

font-weight: 600;

font-size: 28px;

line-height: 36px;

paragraph: 18px;

константы
Typography

Основной и вспомогательный текст

SubtitleRegular 400
24/34/17

Subtitle text

Body-textBold 700
18/26/13

Body-text-bold

Small-text-boldBold 700
14/22/11

Small-text-bold

Caption2-textRegular 400
10/22/11

Caption2-text

Body-textRegular 400
18/26/13

Body-text

Small-textRegular 400
14/22/11

Small-text

Caption-textRegular 400
12/22/11

Caption-text

.cds-subtitle

font-family: Segoe UI, sans-serif;

font-weight: 400;

font-size: 24px;

line-height: 34px;

paragraph: 17px;

.cds-body-text

font-family: Segoe UI, sans-serif;

font-weight: 400;

font-size: 18px;

line-height: 26px;

paragraph: 13px;

.cds-body-text-bold

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 18px;

line-height: 26px;

paragraph: 13px;

.cds-small-text

font-family: Segoe UI, sans-serif;

font-weight: 400;

font-size: 14px;

line-height: 22px;

paragraph: 11px;

.cds-small-text-bold

font-family: Segoe UI, sans-serif;

font-weight: 700;

font-size: 14px;

line-height: 22px;

paragraph: 11px;

.cds-caption

font-family: Segoe UI, sans-serif;

font-weight: 400;

font-size: 12px;

line-height: 22px;

paragraph: 11px;

.cds-caption2

font-family: Segoe UI, sans-serif;

font-weight: 400;

font-size: 10px;

line-height: 22px;

paragraph: 11px;

константы
Typography

Основной текст

Основной размер шрифта на десктопе — 18 пунктов, на смартфоне — 16. Текст такого размера без усилий считывается даже людьми, у которых проблемы со зрением.

Для навигации используется 16 размер текста. Он хорошо читаем в коротких текстах и не отвлекает от блока с основной информацией.

Для необязательных к прочтению текстов допустимо использовать шрифт размером не менее 14 пунктов.

Текстовые блоки должны иметь отступы по 8px сверху и снизу. Помимо этого, дополнительно снизу блока должен быть отступ в 20px.

Длина строки

Длина строки для комфортного чтения c экрана должна равняться 40-80 знакам текста, включая пробелы.

Слишком длинные строки усложняют считывание текста: дочитав до конца строки, сложно быстро найти взглядом начало следующей.

Короткие строки вынуждают перескакивать на следующую строку слишком часто. Единственный случай, когда короткие строки приемлемы — это малое количество текста.

Высота строки

Высота строки численно равна расстоянию между базовыми линиями шрифта.

Оптимальное значение высоты строки — 1,5 размера шрифта, которым набран текст. То есть, для шрифта 14pt это 14 * 1,5 = 21pt. Для заголовков действует соотношение 1,25.

Поскольку мы работаем по 8-пиксельной сетке, то округляем полученное число до ближайшего кратного 8.

константы
Base Colors

ФИРМЕННЫЙ ЦВЕТ

.cds-color-primary

#1946BA

СВЕТЛЫЕ ОТТЕНКИ

.cds-color-primary-100

#D1DAF1

.cds-color-primary-300

#7590D6

ТЕМНЫЕ ОТТЕНКИ

.cds-color-primary-500

#143895

.cds-color-primary-700

#0F2A70

ОБВОДКА

#1946BA

ФОН

.cds-color-light

#E8E8E8

.cds-color-light-700

#EEEEEE

.cds-color-light-500

#E8E8E8

.cds-color-light-300

#E8E8E8

.cds-color-light-100

#E8E8E8
#EEEEEE

ТЕКСТ

.cds-color-dark

#262626

.cds-color-dark-700

#4D4D4D

.cds-color-dark-500

#999999

.cds-color-dark-300

#CCCCCC
#99999

Для заголовков в дизайне следует использовать #262626 или 85% черного.


Заголовок


В качестве цвета для основного текста используется #4D4D4D или 70% черного.


Первый дополнительный цвет используется для подписей, комментариев, заголовков таблиц.


Второй дополнительный оттенок для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.

Фирменный цвет сервиса также можно использовать вместо стандартного цвета ссылок, а также для обозначения информационных блоков/иконов

Для этого фирменный цвет:

не должен быть похож на красный, зеленый и оранжевый, чтобы не нести дополнительный смысл;

должен быть насыщенным: контрастным фону и тексту.

Ссылка
Ссылка
константы
Additional Colors

ЖЕЛТЫЙ

.cds-color-warning

#F69C00

.cds-color-warning-300

#FAC466

.cds-color-warning-100

#FDEBCC
#FAC466

Чтобы привлечь внимание пользователя к важной информации, касающейся его работы в интерфейсе, используйте желто-оранжевый цвет.

КРАСНЫЙ

.cds-color-fail

#D9364B

.cds-color-fail-300

#E88693

.cds-color-fail-100

#F7D7DB
#E88693

Красный — для сообщений об ошибке, невозможности продолжить, неудачном завершении.

ЗЕЛЕНЫЙ

.cds-color-success

#D9364B

.cds-color-success-300

#E88693

.cds-color-success-100

#F7D7DB
#E88693

Зеленый — для сообщений об успехе, удачном завершении.

константы
Basic Kit

Forms

.cds-form-control

border-radius: 4px

padding: 16px

border: none

.cds-shadow

.cds-form-control-fail

border-radius: 4px

padding: 16px

border: none

.cds-color-fail-100

.cds-shadow-fail

.cds-form-control-success

border-radius: 4px

padding: 16px

border: none

.cds-color-success-100

.cds-shadow-success

.cds-form-control

border-radius: 4px

padding: 16px

border: none

.cds-shadow-active

.cds-form-control-fail-active

border-radius: 4px

padding: 16px

border: none

.cds-color-fail-100

.cds-shadow-fail-active

.cds-form-control-disabled

border-radius: 4px

padding: 16px

border: none

.cds-bg-light-700

Shadow

.cds-shadow

box-shadow: 0px 4px 4px 0px #F8F8F8;

box-shadow: 0px 4px 16px 0px #F1F1F1;

.cds-shadow-active

box-shadow: 0px 4px 4px 0px #F8F8F8;

box-shadow: 0px 4px 24px 0px #E3E3E3;

.cds-shadow-fail

box-shadow: 0px 4px 4px 0px #FEF9F9;

box-shadow: 0px 4px 16px 0px #FEFCFC;

.cds-shadow-fail-active

box-shadow: 0px 4px 4px 0px #FFFDFE;

box-shadow: 0px 4px 24px 0px #FCF1F3;

.cds-shadow-success

box-shadow: 0px 4px 16px 0px #F9FCF8;

box-shadow: 0px 4px 8px 0px #FCFDFC;

.cds-shadow-success-active

box-shadow: 0px 4px 4px 0px #F5FAF4;

box-shadow: 0px 4px 4px 0px #F5FAF4;

Компоненты
Attach

.cds-form-control.cds-form-control-attach

.cds-body-text

.cds-color-primary

.cds-color-dark-700

.cds-form-control.cds-form-control-attach-help

.cds-body-text

.cds-color-primary

.cds-color-dark-700

.cds-small-text

.cds-color-dark-300

.cds-form-control.cds-form-control-attach-icon

.cds-ipack-doc-add

.cds-color-light-100

Загрузка

.cds-form-control.cds-form-control-attach-progress

.cds-body-text

.cds-color-dark-700

.cds-progress

Загрузка завершена

.cds-form-control.cds-form-control-attach-success

.cds-body-text

.cds-color-dark-700

.cds-progress.cds-progress-success

Загрузка

Произошла ошибка, попробуйте загрузить файл повторно

.cds-form-control.cds-form-control-attach-fail

.cds-body-text

.cds-color-dark-700

.cds-progress.cds-progress-fail

.cds-small-text

.cds-color-fail

Загрузка

Файл весит больше 10 МБ

.cds-form-control.cds-form-control-attach-fail

.cds-body-text

.cds-color-dark-700

.cds-small-text

.cds-color-fail

Компоненты
TagButton & Badges

.cds-badge-pill

.cds-small-text

.cds-badge-pill.cds-badge-primary

.cds-badge-pill.cds-badge-secondary

.cds-badge-pill.cds-badge-disable

.cds-badge-pill.cds-badge-hover

bordered: 1px

bordered-color: .cds-color-primary-100

.cds-shadow

Teg
Chosen

.cds-tagbutton :chosen

.cds-form-control-chosen

background-color: .cds-color-primary

shadow: none

.cds-ipack-close

.cds-color-light-100

text-color: .cds-color-light-100

Teg
Hover

.cds-tagbutton :hover

.cds-form-control-hover

background-color: .cds-color-light-700

.cds-shadow

.cds-ipack-close

.cds-color-dark

Teg
Default

.cds-tagbutton

.cds-form-control-active

.padding: 1px 8px

.cds-ipack-close

.cds-color-dark-500

Teg
Click

.cds-tagbutton :click

.cds-form-control-hover

background-color: .cds-color-light-700

.cds-ipack-close

.cds-color-light-100

text-color: .cds-color-light-100

Компоненты
Select

.cds-select

.cds-ipack-arrow

.cds-body-text

.cds-color-dark-500

Выбор

.cds-select.cds-select

.cds-form-control

Выбор

.cds-select.cds-select-hover

.cds-form-control-active

Выбор
Россия
  • Россия
  • Америка
  • Германия

.cds-select.cds-select-active :active

ul.cds-list.cds-list-flush

.cds-form-control-active

.cds-body-text

.cds-color-dark-700

Выбор
Россия
  • Россия
  • Америка
  • Германия

.cds-select.cds-select-active :hover

ul.cds-list.cds-list-flush :selected

.cds-ipack-checkmark

li.cds-item-hover

background-color: .cds-color-light-700

Выбор
Россия
  • Россия
  • Америка
  • Германия

.cds-select.cds-select-active :selected

ul.cds-list.cds-list-flush :selected

.cds-ipack-checkmark

Выбор
Россия

.cds-select.cds-select-active

.cds-form-control-active

.cds-small-text

.cds-color-dark-500

.cds-body-text

.cds-color-dark-700

.cds-ipack-close

Компоненты
Dropdown
Заголовок
Dropdown

.cds-dropdown

.cds-form-control

.cds-body-text

.cds-color-dark-700

.cds-ipack-arrow

.cds-color-primary

.cds-body-text

.cds-color-dark

Заголовок
Dropdown

.cds-dropdown :disabled

.cds-form-control-disabled

.cds-body-text

.cds-color-dark-500

.cds-ipack-arrow

.cds-color-dark-500

.cds-body-text

.cds-color-dark

Заголовок
Dropdown
  • Россия
  • Америка
  • Германия

.cds-dropdown.cds-dropdown-list

.cds-form-control-active

ul.cds-list.cds-list-flush

.cds-form-control-active

border-buttom: none

Заголовок
Пункт

.cds-dropdown :selected

.background-color: .cds-color-primary

text-color: .cds-color-light-100

Компоненты
Input

.cds-input

.cds-form-control

.cds-body-text

.cds-color-dark-300

.cds-input-disabled

.cds-form-control-disabled

.cds-body-text

.cds-color-dark-300

Выбор

.cds-input-success

.cds-form-control-success

.cds-small-text

.cds-color-dark-500

.cds-body-text

.cds-color-dark-700

.cds-ipack-checkmark

.cds-color-success

Имя

.cds-input-active

.cds-form-control-active

.cds-small-text

.cds-color-light

.cds-body-text

.cds-color-dark-700

Имя

.cds-input-disabled

.cds-form-control-disabled

.cds-small-text

.cds-color-dark-300

.cds-body-text

.cds-color-dark-500

Текст подсказки

.cds-input

.cds-form-control

.cds-body-text

.cds-color-dark-300

.cds-small-text

.cds-color-dark-500

Имя

.cds-input-fail-tip

.cds-form-control-fail

.cds-body-text

.cds-color-dark-700

.cds-small-text

.cds-color-fail

Имя
Текст ошибки

.cds-input-fail-active-tip

.cds-form-control-fail-active

.cds-small-text

.cds-color-dark-500

.cds-body-text

.cds-color-dark-700

.cds-small-text

.cds-color-fail

.cds-input-phone

.cds-form-control

.cds-body-text

.cds-color-dark-300

.cds-flag-ru

.cds-input-phone

.cds-form-control

.cds-body-text

.cds-color-dark-700

.cds-flag-ru

.cds-input-icon

.cds-form-control

.cds-body-text

.cds-color-dark-300

.cds-ipack-info

Имя

.cds-input-icon-active

.cds-form-control-active

.cds-small-text

.cds-color-dark-300

.cds-body-text

.cds-color-dark-700

.cds-ipack-info

Компоненты
CalendarInput

.cds-input-calendar

.cds-form-control

.cds-body-text

.cds-color-dark-300

.cds-ipack-calendar

.cds-color-dark-300

.cds-input-calendar-active

.cds-form-control-active

.cds-body-text

.cds-color-dark-700

.cds-ipack-calendar

.cds-color-dark-700

Такой даты не существует

.cds-form-control-fail

.cds-form-control-active

.cds-body-text

.cds-color-dark-700

.cds-ipack-calendar

.cds-color-fail

.cds-small-text

.cds-color-fail

.cds-form-control-success

.cds-form-control-active

.cds-body-text

.cds-color-dark-700

.cds-ipack-calendar

.cds-color-success

Компоненты
Alert & InteractivePlate

.cds-alert

border-right: 4px;

padding: 16px;

border: none;

.cds-shadow

.cds-ipack-delete

.cds-color-dark-500

Основной

.cds-alert.cds-alert

.cds-body-text

.cds-color-dark-700

.cds-ipack-delete

.cds-color-dark-500

Основной

.cds-alert.cds-info

.cds-body-text

.cds-color-dark-700

.cds-ipack-delete

.cds-color-dark-500

.cds-ipack-info

Предупреждающий

.cds-alert.cds-warning

.cds-body-text

.cds-color-warning

.cds-ipack-delete

.cds-color-dark-500

.cds-ipack-warning

.cds-color-warning

Предупреждающий

.cds-alert.cds-fail

.cds-body-text

.cds-color-fail

.cds-ipack-delete

.cds-color-dark-500

.cds-ipack-warning

.cds-color-fail

Предупреждающий

.cds-alert.cds-success

.cds-body-text

.cds-color-success

.cds-ipack-delete

.cds-color-dark-500

.cds-ipack-checkmark

.cds-color-success

Интерактивный элемент

.cds-interactive-plate

.cds-form-control-active

padding: 16px 36px 16px 16px

.cds-body-text

.cds-color-dark-700

.cds-ipack-arrowdown

.cds-color-dark-500

Интерактивный элемент
Проекция, как можно показать с помощью не совсем тривиальных вычислений, опасна.

.cds-interactive-plate.cds-interactive-plate-text

.cds-small-text

.cds-color-dark-500

Компоненты
PromptConfirmationModal
Заголовок
Текст сообщения
Закрыть
Кнопка
Текст сообщения
Закрыть
Кнопка
Заголовок
Текст сообщения
Закрыть
Кнопка
Компоненты
TextArea

.cds-text-area

border-radius: 4px;

padding: 8px 16px;

border: 1px;

.cds-body-text

Введите текст
Введите текст
Текст ошибки
Введите текст
Компоненты
Tooltip

.cds-tooltip

.cds-small-text

Текст подсказки

.cds-tooltip.cds-tooltip-on-top-left

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-on-top-right

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-on-bottom-right

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-on-bottom-left

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-on-left

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-on-right

.cds-form-control-active

text-color: .cds-color-dark

Текст подсказки

.cds-tooltip.cds-tooltip-warning

text-color: .cds-color-warning

background-color: .cds-color-warning-100

Текст подсказки

.cds-tooltip.cds-tooltip-warning

.cds-form-control-fail-active

text-color: .cds-color-fail

Текст подсказки

.cds-tooltip.cds-tooltip-on-top-left

.cds-form-control-success

text-color: .cds-color-success

Компоненты
Tabs
Name of Tab
Default
Name of Tab
Hover
Name of Tab
Active
Name of Tab
Default
Name of Tab
Hover
Name of Tab
Active
Name of Tab
Default
Name of Tab
Hover
Name of Tab
Active
константы
Checkbox
Selected
Selected Active
Selected Disabled
Hover
Fail
Disabled
Default
Active
Indeterminate Disabled
Selected Hover
Компоненты
CheckboxGroup
Заголовок
Заголовок
Выберите хотя 
бы один пункт
Заголовок
Текст подсказки
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Текст подсказки
Заголовок
Выберите хотя бы один пункт
Заголовок
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Выберите хотя бы один пункт
Заголовок
Текст подсказки
Компоненты
Notification
Заголовок
Описание в одну строку
Закрыть
Закрыть
Компоненты
Sidebar
Компоненты
Calendar
Компоненты
Links
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Ссылка
Компоненты
RadioButton
Hover
Active
Disabled
Default
Error
Selected Disabled
Selected
Компоненты
RadioGroup
Заголовок
Заголовок
Выберите хотя 
бы один пункт
Заголовок
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Текст подсказки
Заголовок
Кнопка
Кнопка
Кнопка
Кнопка
Выберите хотя бы один пункт
Заголовок
Выберите хотя бы один пункт
Компоненты
Notification
Компоненты
Popup & List
Компоненты
Calendar
Компоненты
Toggle & ProgressBar
Компоненты
Collapse & spinner
Компоненты
ListHeader
Компоненты
ListHeader
компоненты
Buttons
Secondary
Label Label + Icon Icon Icon circle
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка
компоненты
Buttons
Secondary
Label Label + Icon Icon Icon circle
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка
компоненты
Buttons
Secondary
Label Label + Icon Icon Icon circle
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка
компоненты
Buttons
Secondary white
Label Label + Icon Icon Icon circle
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка
компоненты
Buttons
Flat
Label Label + Icon Icon
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка
компоненты
Buttons
Flat
Label Label + Icon Icon
Default
Кнопка
Кнопка
Hover
Кнопка
Кнопка
Active
Кнопка
Кнопка
Disabled
Кнопка
Кнопка